<template>
  <el-main>
    <el-form :model="searchModel" ref="searchForm" label-width="80px" :inline="true" size="small">
                <el-form-item>
                    <el-input v-model="searchModel.name" placeholder="请输入采购物品名称"/>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="searchModel.username" placeholder="请输入采购人"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="search(pageNo, pageSize)">查询</el-button>
                    <el-button icon="el-icon-refresh-right" @click="resetValue()">重置</el-button>
                </el-form-item>
    </el-form>
    <el-table :data="orderList"  stripe style="width: 100%; margin-bottom: 10px">
                <el-table-column prop="name" label="采购物品" align="center" ></el-table-column>
                <el-table-column prop="supname" label="供应商名称" align="center" width="150px"></el-table-column>
                <el-table-column prop="username" label="采购人" align="center" ></el-table-column>
                <el-table-column prop="num" label="数量" align="center" ></el-table-column>
                <el-table-column prop="status" label="状态" align="center" >
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.status == '1'" size="normal">已审核</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="payStatus" label="支付状态" align="center" >
                    <template slot-scope="scope">
                        <el-tag type="danger" v-if="scope.row.payStatus == '0'" size="normal">未付款</el-tag>
                        <el-tag type="success" v-if="scope.row.payStatus == '1'" size="normal">已结清</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="payUser" label="付款财务" align="center" ></el-table-column>
                <el-table-column prop="payTime" label="结账时间" align="center" width="150px"></el-table-column>
                <el-table-column  label="操作" align="center" width="300px">
                    <template slot-scope="scope">
                        <el-button icon="el-icon-edit" type="text" size="small" @click="handleEdit(scope.row)" v-if="hasPermission('sys:order:edit')">结款</el-button>
                    </template>
                </el-table-column>
    </el-table>
    <el-pagination background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total" align="center">
    </el-pagination>
  </el-main>
</template>
<script>
import{getOrderList,updateOrder} from '@/api/order';
//导入对话框组件
import SystemDialog from '@/components/system/SystemDialog.vue';
export default {
    name:"orderList",
    //注册组件
        components:{
            SystemDialog
        },
    data() {
        return {
            searchModel:{
                name:'',
                username:'',
                pageNo: 1,
                pageSize: 10,
            },
            orderList:[],
            shop:{
                    id:'',
                    name:'',
                    supname:'',
                    username:'',
                    num:1,
                    status:'',
                    shopTime:'',
                    remarks:'',
                    payStatus:'',
                    payUser:'',
                    payTime:'',
                },
        }
    },
    methods:{
        //查询
        async search(pageNo=1,pageSize=10){
                this.searchModel.pageNo = pageNo;//当前页码
                this.searchModel.pageSize = pageSize;//每页显示数量
                let res = await getOrderList(this.searchModel);
                //执行成功
                if (res.success) {
                //列表
                this.orderList = res.data.records;
                //总数量
                this.total = res.data.total;
                }
        },
        resetValue(){
            this.searchModel.name ='',
            this.searchModel.username = '';
            this.search();
        },
        async handleEdit(row){
            this.$objCopy(row, this.shop);
            let res=null;
            res = await updateOrder(this.shop);
            if(res.success){
                        this.$message.success(res.message);
                        this.search();
                    }else{
                        this.$message.error(res.message);
                    }
        }
    },
    //初始化时调用
    created() {
        this.search()
    },
}
</script>

<style>

</style>